<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <style type="text/css">
        #calculator table, td {
            border: 1px solid gray;
            border-collapse: collapse;
            table-layout: fixed;
            background-color: aqua;
        }

        #calculator table {
            width: 180px;
            height: 180px;
            margin: 0 auto;
            text-align: center;
        }

        #calculator button {
            font-size: 10px;
            width: 100%;
            height: 90%;
            border-radius: 5%;
        }

        #calculator .screen {
            height: 30px;
            border: 1px solid gray;
            margin: 3px;
            text-align: right;
            line-height: 30px;
            padding-right: 3px;
            box-sizing: border-box;
            background-color: beige;
        }

        #calculator .num {
            background-color: coral;
        }

    </style>
</head>
<body>

<section id="calculator">

    <table>
        <tr>
            <td colspan="4">
                <div id="screen" class="screen">0</div>
            </td>
        </tr>
        <tr>
            <td>
                <button>存储</button>
            </td>
            <td>
                <button>存取</button>
            </td>
            <td>
                <button>清零</button>
            </td>
            <td>
                <button id="division-btn">/</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="num" value="7">7</button>
            </td>
            <td>
                <button class="num" value="8">8</button>
            </td>
            <td>
                <button class="num" value="9">9</button>
            </td>
            <td>
                <button id="multiplication-btn">*</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="num" value="4">4</button>
            </td>
            <td>
                <button class="num" value="5">5</button>
            </td>
            <td>
                <button class="num" value="6">6</button>
            </td>
            <td>
                <button id="subtraction-btn">-</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="num" value="1">1</button>
            </td>
            <td>
                <button class="num" value="2">2</button>
            </td>
            <td>
                <button class="num" value="3">3</button>
            </td>
            <td>
                <button id="add-btn">+</button>
            </td>
        </tr>
        <tr>
            <td>
                <button class="num" value="0">0</button>
            </td>
            <td>
                <button>.</button>
            </td>
            <td>
                <button>+/-</button>
            </td>
            <td>
                <button id="equal-btn">=</button>
            </td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    window.onload = () => {
        let firstNum;
        let symbol;
        let screen = document.querySelector("#screen");
        let num = document.querySelectorAll(".num");
        let subtractionBtn = document.querySelector("#subtraction-btn");
        let addBtn = document.querySelector("#add-btn");
        let multiplicationBtn = document.querySelector("#multiplication-btn");
        let divisionBtn = document.querySelector("#division-btn");
        let equalBtn = document.querySelector("#equal-btn");

        for (let i = 0, j = num.length; i < j; i++) {
            num[i].onclick = () => {
                let currentValue = screen.innerHTML;
                if (currentValue === "0" || currentValue === "+" || currentValue === "-"  || currentValue === "*"  || currentValue === "/") {
                    screen.innerHTML = num[i]["value"];
                } else {
                    screen.innerHTML += num[i]["value"];
                }
            };
        }

        /* 加法 */
        addBtn.onclick = () => {
            let currentValue = screen.innerHTML;
            firstNum = parseFloat(currentValue);
            screen.innerHTML = "+";
            symbol = screen.innerHTML;
        };

        /* 减法 */
        subtractionBtn.onclick = () => {
            let currentValue = screen.innerHTML;
            firstNum = parseFloat(currentValue);
            screen.innerHTML = "-";
            symbol = screen.innerHTML;
        };

        /* 乘法 */
        multiplicationBtn.onclick = () => {
            let currentValue = screen.innerHTML;
            firstNum = parseFloat(currentValue);
            screen.innerHTML = "*";
            symbol = screen.innerHTML;
        };

        /* 除法 */
        divisionBtn.onclick = () => {
            let currentValue = screen.innerHTML;
            firstNum = parseFloat(currentValue);
            screen.innerHTML = "/";
            symbol = screen.innerHTML;
        };

        equalBtn.onclick = () => {
            let currentValue = parseFloat(screen.innerHTML);
            if (symbol === "+") {
                screen.innerHTML = firstNum + currentValue;
            } else if (symbol === "-") {
                screen.innerHTML = firstNum - currentValue;
            } else if (symbol === "*") {
                screen.innerHTML = firstNum * currentValue;
            } else if (symbol === "/") {
                screen.innerHTML = firstNum / currentValue;
            }
        }
    };
</script>

</body>
</html>